@use "./lib/svg";

.base-icon,
.icon-font,
.icon-button {
  border: 0;

  background-color: transparent;
  background-position: 50% 50%;
  background-size: 100%;
  background-repeat: no-repeat;
  outline: 0;

  font-size: 0;
}

.icon-font {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

.icon-button {
  width: 24px;
  height: 24px;
}

.icon-back {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path d="M953.294 447.05H269.228l270.319-267.02-70.922-71.048L136.96 436.58l-.221-.22-35.917 35.915-9.915 9.794.06.06-15.175 15.176 15.133 15.134-.018.018 3.02 2.982 42.812 42.813.267-.266 331.618 327.518 70.922-71.007-270.348-267.019h684.095z"/></svg>'
  );

  @media (prefers-color-scheme: dark) {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path d="M953.294 447.05H269.228l270.319-267.02-70.922-71.048L136.96 436.58l-.221-.22-35.917 35.915-9.915 9.794.06.06-15.175 15.176 15.133 15.134-.018.018 3.02 2.982 42.812 42.813.267-.266 331.618 327.518 70.922-71.007-270.348-267.019h684.095z" fill="#fff"/></svg>'
    );
  }
}

.icon-home {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path d="M204.207 418.15a64 64 0 00-22.874 49.035v375.482h181.334v-230.4c0-35.348 28.652-64 64-64h170.666c35.348 0 64 28.652 64 64v230.4h181.334V467.185a64 64 0 00-22.874-49.035L553.126 194.494c-23.786-19.951-58.466-19.951-82.252 0L204.207 418.15zm361.126 226.117H458.667v198.4c0 53.02-42.98 96-96 96H181.333c-53.02 0-96-42.98-96-96V467.185a160 160 0 0157.182-122.59L409.182 120.94c59.47-49.878 146.165-49.878 205.636 0l266.667 223.656a160 160 0 0157.182 122.59v375.482c0 53.02-42.98 96-96 96H661.333c-53.02 0-96-42.98-96-96v-198.4z"/></svg>'
  );

  @media (prefers-color-scheme: dark) {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path d="M204.207 418.15a64 64 0 00-22.874 49.035v375.482h181.334v-230.4c0-35.348 28.652-64 64-64h170.666c35.348 0 64 28.652 64 64v230.4h181.334V467.185a64 64 0 00-22.874-49.035L553.126 194.494c-23.786-19.951-58.466-19.951-82.252 0L204.207 418.15zm361.126 226.117H458.667v198.4c0 53.02-42.98 96-96 96H181.333c-53.02 0-96-42.98-96-96V467.185a160 160 0 0157.182-122.59L409.182 120.94c59.47-49.878 146.165-49.878 205.636 0l266.667 223.656a160 160 0 0157.182 122.59v375.482c0 53.02-42.98 96-96 96H661.333c-53.02 0-96-42.98-96-96v-198.4z" fill="#fff"/></svg>'
    );
  }
}

.icon-close {
  @include svg.background-svg(
    '<svg viewBox="0 0 24 24"><path d="M12.25 10.693L6.057 4.5 5 5.557l6.193 6.193L5 17.943 6.057 19l6.193-6.193L18.443 19l1.057-1.057-6.193-6.193L19.5 5.557 18.443 4.5z" fill-rule="evenodd" /></svg>'
  );

  @media (prefers-color-scheme: dark) {
    @include svg.background-svg(
      '<svg viewBox="0 0 24 24"><path d="M12.25 10.693L6.057 4.5 5 5.557l6.193 6.193L5 17.943 6.057 19l6.193-6.193L18.443 19l1.057-1.057-6.193-6.193L19.5 5.557 18.443 4.5z" fill-rule="evenodd" fill="#fff" /></svg>'
    );
  }
}

.icon-more {
  @include svg.background-svg(
    '<svg viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path fill="none" d="M-374-8c0-6.627 5.367-12 12-12H28c6.628 0 12 5.374 12 12v52h-414V-8z"/><path fill="#000" fill-opacity=".9" d="M6.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0zM12 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z"/></g></svg>'
  );

  @media (prefers-color-scheme: dark) {
    @include svg.background-svg(
      '<svg viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path fill="none" d="M-374-8c0-6.627 5.367-12 12-12H28c6.628 0 12 5.374 12 12v52h-414V-8z"/><path fill="#FFF" fill-opacity=".9" d="M6.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0zM12 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z"/></g></svg>'
    );
  }
}

.icon-share {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path d="M618.86 92L992 484.88 618.86 875.9V651.38S247.64 608.78 32 932c0 0 67.5-615.48 586.86-615.48" fill="#fff"/></svg>'
  );
}
